<template>
  <div class="message-list" ref="scrollContainer">
    <div v-for="(message, index) in messages" :key="index" class="message">
      <div
        :class="{
          'user-message': message.sender === 'user',
          'bot-message': message.sender === 'bot',
        }"
      >
        {{ message.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    messages: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      typingMessage: "",
      typingTimer: null,
    };
  },
  watch: {
    messages: {
      immediate: true,
      deep: true,
      handler: function (val) {
        if (val) {
          console.log(val, "val");
           this.scrollToBottom();
        }
      },
    },
  },
  methods: {
    asdada() {
      this.typingMessage = "";
      clearInterval(this.typingTimer);
      this.typingTimer = setInterval(() => {
        if (this.typingMessage.length < this.replyMessage.length) {
          this.typingMessage += this.replyMessage.charAt(
            this.typingMessage.length
          );
        } else {
          clearInterval(this.typingTimer);
        }
      }, 50); // 控制每个字符出现的时间间隔，单位毫秒
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.scrollContainer;
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    }
  },
};
</script>

<style scoped>
.message-list {
  overflow-y: auto;
  height: 600px;
  border: none;
  padding: 10px;
}

.user-message {
  text-align: right;
  background-color: #e6f7ff;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.bot-message {
  text-align: left;
  background-color: #f5f5f5;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>